<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/index.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script src="js/jquery-3.5.1.slim.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		#dlzc {
			position: absolute;
			top: 20px;
			left: 1200px;
		}
	</style>
</head>

<body>
	<div id="dlzc"><a href="登录.html">登录/注册</a></div>
	<div class="container">
		<h1 class="text-center">---二十四节气---</h1>
		<div>
			<ul class="nav bg-secondary">
				<li class="nav-item mr-5"><a href="index.html" class="nav-link text-light active">首页</a></li>
				<li class="nav-item mr-5"><a href="春.html" class="nav-link text-light">春</a></li>
				<li class="nav-item mr-5"><a href="夏.html" class="nav-link text-light">夏</a></li>
				<li class="nav-item mr-5"><a href="秋.html" class="nav-link text-light">秋</a></li>
				<li class="nav-item mr-5"><a href="冬.html" class="nav-link text-light">冬</a></li>
			</ul>
		</div>
		<div class="row">
			<div id="lbt" class="col-xl-4">
				<img src="./images/轮播图01.jpg" width="300" height="400">
			</div>
			<div class="col-xl-8" id="bjt1">
				<h3 class="mt-3">二十四节气介绍</h3>
				<p class="mt-3">
					二十四节气，是中国古代农耕文明的产物，是一套用于指导农事活动的历法体系，它准确地反映了自然节律的变化，在人们的日常生活中发挥了极为重要的作用。这套体系不仅指导了农耕生产的时间，还包含了丰富的民俗事象，是中华民族悠久历史文化的重要组成部分。二十四节气起源于上古时代，最初依据斗转星移制定，后发展为根据太阳在回归黄道上的位置来划分，每15°为1等份，形成24个节气。这些节气不仅确立了“十二月建”的特定节令，还科学地揭示了天文气象变化的规律，将天文、农事、物候和民俗巧妙地结合在一起，衍生了大量的岁时节令文化。
				</p>
				<p class="mt-3">
					二十四节气被列入联合国教科文组织人类非物质文化遗产代表作名录，体现了其在国际上的重要地位和价值。每个节气都有其独特的含义和象征，如立春标志着春季的开始，大寒则是一年中最冷的时期。二十四节气分为四类：表示寒来暑往变化的节气、象征气温变化的节气、反映降水量的节气以及反应物候现象或农事活动的节气。它们共同构成了中国特有的时间知识和实践系统，是中华民族智慧和文化的重要体现。
				</p>
			</div>
		</div>
		<hr class="bg-dark" />
		<div id="xs">
			<div><a href="#"><img src="images/背景图04.jpg" width="1110"></a></div>
			<div class="row">
				<div class="col-xl-2"><img src="images/春图.jpg" width="150" height="200"></div>
				<div class="col-xl-3 text-center">
					<div class="bg-success mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">立春</p>
						<p class="mb-0">Spring Begins</p>
					</div>
					<div class="bg-success mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">春分</p>
						<p class="mb-0">Vernal Equinox</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-success mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">雨水</p>
						<p class="mb-0">The Rains</p>
					</div>
					<div class="bg-success mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">清明</p>
						<p class="mb-0">Clear And Bright</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-success mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">惊蛰</p>
						<p class="mb-0">Insects Awaken</p>
					</div>
					<div class="bg-success mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">谷雨</p>
						<p class="mb-0">Grain Rain</p>
					</div>
				</div>
				<div class="col-xl-2"><img src="images/夏图.jpg" width="150" height="200"></div>
				<div class="col-xl-3 text-center">
					<div class="bg-danger mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">立夏</p>
						<p class="mb-0">Summer Begins</p>
					</div>
					<div class="bg-danger mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">夏至</p>
						<p class="mb-0">Summer Solstice</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-danger mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">小满</p>
						<p class="mb-0">Guarn Buds</p>
					</div>
					<div class="bg-danger mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">小暑</p>
						<p class="mb-0">Slight Heat</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-danger mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">芒种</p>
						<p class="mb-0">Grain In Ear</p>
					</div>
					<div class="bg-danger mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">大暑</p>
						<p class="mb-0">Great Heat</p>
					</div>
				</div>
				<div class="col-xl-2"><img src="images/秋图.jpg" width="150" height="200"></div>
				<div class="col-xl-3 text-center">
					<div class="bg-warning mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">立秋</p>
						<p class="mb-0">Autumn Begains</p>
					</div>
					<div class="bg-warning mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">秋分</p>
						<p class="mb-0">Autumn Equinox</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-warning mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">处暑</p>
						<p class="mb-0">Stopping The Heat</p>
					</div>
					<div class="bg-warning mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">避露</p>
						<p class="mb-0">Cold Dews</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-warning mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">白露</p>
						<p class="mb-0">White Dews</p>
					</div>
					<div class="bg-warning mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">霜降</p>
						<p class="mb-0">Hoar-frost Falls</p>
					</div>
				</div>
				<div class="col-xl-2"><img src="images/冬图.jpg" width="150" height="200"></div>
				<div class="col-xl-3 text-center">
					<div class="badge-secondary mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">立冬</p>
						<p class="mb-0">Winter Begins</p>
					</div>
					<div class="bg-secondary mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">冬至</p>
						<p class="mb-0">Winter Solstice</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-secondary mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">小雪</p>
						<p class="mb-0">Light Snow</p>
					</div>
					<div class="bg-secondary mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">小寒</p>
						<p class="mb-0">Slight Cold</p>
					</div>
				</div>
				<div class="col-xl-3 text-center">
					<div class="bg-secondary mt-4 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">大雪</p>
						<p class="mb-0">Heavy snow</p>
					</div>
					<div class="bg-secondary mt-2 text-light" id="chu1"
						style="border-radius: 5px;height:60px; width:280px;">
						<p class="mb-0">大寒</p>
						<p class="mb-0">Great Cold</p>
					</div>
				</div>
			</div>
		</div>
		<hr class="bg-dark" />
		<div id="bjjt" class="text-center">
			<h4>春雨惊春清谷天，夏满芒夏暑相连。</h4>
			<h4>秋处露秋寒霜降，冬雪雪冬小大寒。</h4>
			<h4>每月两节不变更，最多相差一两天。</h4>
			<h4>上半年来六廿一，下半年是八廿三。</h4>
		</div>
	</div>
	<div id="box" onclick="ab()"></div>
	<footer class="text-center bg-secondary">
		<p>版权所有</p>
	</footer>
	<script>
		var arr = ["./images/轮播图01.jpg", "./images/轮播图02.jpg", "./images/轮播图03.jpg", "./images/轮播图04.jpg"]
		var index = 0
		var lbt = document.getElementById("lbt")
		function a() {
			index = ++index % arr.length
			lbt.firstElementChild.src = arr[index]
			setTimeout("a()", 2000)
		}
		window.onload = a
		var bjts = document.querySelectorAll("#chu1")
		bjts.forEach(item => {
			item.addEventListener('mousemove', function () {
				item.style.backgroundImage = "url(images/背景图.jpg)"
			})
			item.addEventListener('mouseleave', function () {
				item.style.backgroundImage = ""
			})
		})
		function ab(speed) {
			speed = speed || 0.1
			var x = document.documentElement.scrollLeft
			var y = document.documentElement.scrollTop
			var sp = speed + 1
			window.scrollTo(Math.floor(x / sp), Math.floor(y / sp))
			if (x > 0 || y > 0) {
				var run = "ab(" + speed + ")"
				setTimeout(run, 10)
			}
		}
	</script>
</body>

</html>